<template>
  <div class="search">
    <div class="container" v-if="errorFlag">
      <div class="crumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="category">
        <div class="list">
          <a href="" class="second-menu">品牌：</a>
          <ul>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>

          </ul>
        </div>
        <div class="line"></div>
        <div class="list">
          <a href="" class="second-menu">分类：</a>
          <ul>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>
            <li>
              <a href="">小米</a>
            </li>

          </ul>
        </div>
<!--        <div class="line"></div>-->
        <!--        <div class="list">-->
        <!--          <a href="" class="second-menu">功能：</a>-->
        <!--          <ul>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->
        <!--            <li>-->
        <!--              <a href="">小米</a>-->
        <!--            </li>-->

        <!--          </ul>-->
        <!--        </div>-->
      </div>
      <div class="sort">
        <div class="left">
          <p>智能排序</p>
          <p>新品优先</p>
          <p>销量排序</p>
          <p>价格排序</p>
        </div>
        <div class="right">
          <el-radio v-model="radio" label="1">促销</el-radio>
          <el-radio v-model="radio" label="2">新品</el-radio>
          <el-radio v-model="radio" label="3">仅看有货</el-radio>
        </div>
      </div>
      <div class="good-list">
        <div class="new-list">
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>
          <div class="shop-item">
            <span class="flag">新品</span>
            <div class="item-img">
              <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
            </div>
            <div class="item-info">
              <h3 class="title">小米11</h3>
              <p class="desc">6400万全场景四摄</p>
              <p class="price">1399元</p>
            </div>
          </div>

        </div>
      </div>
      <div class="page">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
      </div>
      <div class="shop-guess">
        <h3 class="cate-word">猜你喜欢</h3>
        <div class="wrap-shop">
          <div class="new-list">
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="error" v-else>
      <div class="message">
        <div class="l1">抱歉，没有找到符合条件的商品</div>
        <div class="l2">
          <p>建议您：</p>
          <p> 1、适当减少筛选条件，可以获得更多结果</p>
          <p> 2、尝试其他关键词</p>
        </div>
      </div>
      <div class="shop-guess">
        <h3 class="cate-word">猜你喜欢</h3>
        <div class="wrap-shop">
          <div class="new-list">
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
            <div class="shop-item">
              <span class="flag">新品</span>
              <div class="item-img">
                <img src="~@/static/imgs/detail/phone-1.jpg" alt="">
              </div>
              <div class="item-info">
                <h3 class="title">小米11</h3>
                <p class="desc">6400万全场景四摄</p>
                <p class="price">1399元</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: "search",
  data() {
    return {
      radio: '1',
      errorFlag: true
    };
  },
  methods: {
    // 没有取到数据隐藏
    getSearchProduct(key) {
      console.log(key)
    },
    getCategoryProduct(key) {
      console.log(key)
    }
  },

  mounted() {
    let flag = this.$route.query

    if (Object.prototype.hasOwnProperty.call(flag, 'key') && flag.key !== "") {
      this.getSearchProduct(flag.key)
    } else if (Object.prototype.hasOwnProperty.call(flag, 'categoryId') && flag.categoryId !== "") {
      this.getCategoryProduct(flag.categoryId)
    } else {
      // 只要这两个参数 否则隐藏面板
      this.errorFlag = false;
    }

  }
}
</script>

<style lang="scss">
.search {
  margin-top: 3px;
  background-color: #f5f5f5;

  .error {
    margin: 0 auto;
    width: 1190px;
    padding: 20px 0;

    .message {

      height: 300px;
      background-color: #FFFFFF;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .l1 {
        font-size: 18px;
        font-weight: bold;
      }

      .l2{
        margin-top: 20px;
        margin-left: -25px;
      }
    }

    .shop-guess {
      margin-top: 20px;
      height: 380px;
      display: flex;
      flex-direction: column;

      .cate-word {
        padding: 15px 0;
        font-size: 22px;
        height: 21px;
        line-height: 21px;
        color: #333;
      }

      .wrap-shop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .new-list {
          // https://www.jianshu.com/p/e8f236fcf515
          // 换行布局 wrap
          display: flex;
          width: 1190px;
          justify-content: space-between;
          text-align: center;
          flex-wrap: wrap;

          .shop-item {
            background-color: #FFFFFF;
            width: 230px;
            height: 280px;

            .flag {
              display: inline-block;
              width: 67px;
              color: #FFFFFF;
              height: 24px;
              font-size: 14px;
              line-height: 24px;
              background-color: aquamarine;

              &.new-pro {
                background-color: aquamarine;
              }

              &.kill-pro {
                background-color: #FF6600;
              }
            }

            .item-img {
              width: 160px;
              height: 160px;
              margin: 0 auto;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item-info {
              .title {
                font-size: 14px;
                color: #333;
                line-height: 14px;
                font-weight: 700;
              }

              .desc {
                color: #999;
                line-height: 13px;
                margin: 6px auto 13px
              }

              .price {
                color: #FF6600;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;

                //&:after {
                //  // 垂直居中
                //  vertical-align: middle;
                //  margin-left: 3px;
                //  content: ' ';
                //  display: inline-block;
                //  width: 28px;
                //  height: 28px;
                //  background: url("~@/static/imgs/cart (2).png") no-repeat center;
                //  background-size: 25px;
                //}
              }
            }

            //  https://blog.csdn.net/tenggeer0789/article/details/89478859
            // 阴影实现
            &:hover {
              -webkit-box-shadow: #ccc 0px 10px 10px;
              -moz-box-shadow: #ccc 0px 10px 10px;
              box-shadow: #ccc 0px 10px 10px;
              transition: all .2s;
            }
          }

        }
      }
    }
  }

  .container {
    margin: 0 auto;
    width: 1190px;

    .crumb {
      padding: 10px 0;
      display: flex;
      align-items: center;
      height: 30px;
    }

    .category {
      //margin-top: -15px;
      background-color: #FFFFFF;
      width: 1190px;
      height: 100px;

      display: flex;
      flex-direction: column;
      justify-content: center;


      .line {
        margin: 10px 0;
        border-bottom: 2px solid #F8F8F8;
      }

      .list {
        display: flex;
        justify-items: center;

        .second-menu {
          margin-left: 20px;
          color: #b0b0b0;
          font-size: 16px;
          width: 50px;
        }

        ul {
          height: 20px;

          li {
            display: inline-block;

            a {
              margin-right: 20px;
              font-size: 16px;
              color: #424242;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    .sort {
      color: #424242;

      .left {
        display: flex;
        align-items: center;

        p {
          margin-right: 30px;
          font-size: 14px;
          color: #606266;
        }
      }

      height: 80px;
      width: 1190px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .page {
      display: flex;
      justify-content: center;
      margin: 20px 0 30px 0;

    }

    .good-list {
      text-align: center;

      .new-list {
        // https://www.jianshu.com/p/e8f236fcf515
        // 换行布局 wrap
        display: flex;
        width: 1190px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;

        .shop-item {
          background-color: #FFFFFF;
          width: 233px;
          height: 280px;
          margin-right: 5px;
          margin-top: 5px;

          .flag {
            display: inline-block;
            width: 67px;
            color: #FFFFFF;
            height: 24px;
            font-size: 14px;
            line-height: 24px;
            background-color: aquamarine;

            &.new-pro {
              background-color: aquamarine;
            }

            &.kill-pro {
              background-color: #FF6600;
            }
          }

          .item-img {
            width: 160px;
            height: 160px;
            margin: 0 auto;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .item-info {
            .title {
              font-size: 14px;
              color: #333;
              line-height: 14px;
              font-weight: 700;
            }

            .desc {
              color: #999;
              line-height: 13px;
              margin: 6px auto 13px
            }

            .price {
              color: #FF6600;
              font-size: 14px;
              font-weight: 700;
              cursor: pointer;

              //&:after {
              //  // 垂直居中
              //  vertical-align: middle;
              //  margin-left: 3px;
              //  content: ' ';
              //  display: inline-block;
              //  width: 28px;
              //  height: 28px;
              //  background: url("~@/static/imgs/cart (2).png") no-repeat center;
              //  background-size: 25px;
              //}
            }
          }

          //  https://blog.csdn.net/tenggeer0789/article/details/89478859
          // 阴影实现
          &:hover {
            -webkit-box-shadow: #ccc 0 10px 10px;
            -moz-box-shadow: #ccc 0 10px 10px;
            box-shadow: #ccc 0 10px 10px;
            transition: all .2s;
          }
        }
      }
    }

    .shop-guess {
      margin-top: 5px;
      height: 380px;
      display: flex;
      flex-direction: column;

      .cate-word {
        padding: 15px 0;
        font-size: 22px;
        height: 21px;
        line-height: 21px;
        color: #333;
      }

      .wrap-shop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .new-list {
          // https://www.jianshu.com/p/e8f236fcf515
          // 换行布局 wrap
          display: flex;
          width: 1190px;
          justify-content: space-between;
          text-align: center;
          flex-wrap: wrap;

          .shop-item {
            background-color: #FFFFFF;
            width: 230px;
            height: 280px;

            .flag {
              display: inline-block;
              width: 67px;
              color: #FFFFFF;
              height: 24px;
              font-size: 14px;
              line-height: 24px;
              background-color: aquamarine;

              &.new-pro {
                background-color: aquamarine;
              }

              &.kill-pro {
                background-color: #FF6600;
              }
            }

            .item-img {
              width: 160px;
              height: 160px;
              margin: 0 auto;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item-info {
              .title {
                font-size: 14px;
                color: #333;
                line-height: 14px;
                font-weight: 700;
              }

              .desc {
                color: #999;
                line-height: 13px;
                margin: 6px auto 13px
              }

              .price {
                color: #FF6600;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;

                //&:after {
                //  // 垂直居中
                //  vertical-align: middle;
                //  margin-left: 3px;
                //  content: ' ';
                //  display: inline-block;
                //  width: 28px;
                //  height: 28px;
                //  background: url("~@/static/imgs/cart (2).png") no-repeat center;
                //  background-size: 25px;
                //}
              }
            }

            //  https://blog.csdn.net/tenggeer0789/article/details/89478859
            // 阴影实现
            &:hover {
              -webkit-box-shadow: #ccc 0 10px 10px;
              -moz-box-shadow: #ccc 0 10px 10px;
              box-shadow: #ccc 0 10px 10px;
              transition: all .2s;
            }
          }

        }
      }
    }
  }
}
</style>